<template>
	<view class="home">
    
	  <m-nav :navStyle="navStyle" :isLeft="false" :isRight="true">
		  <block slot="content">
        <view>
          <text class="nav-tab" @tap="selectTab('search')" :class="type=='search' ? 'tabAction' : ''">Search</text>
          <text class="nav-tab" @tap="selectTab('nearby')" :class="type=='nearby' ? 'tabAction' : ''">Nearby</text>
        </view>
      </block>
      <block slot="right">
        <view @tap="tapRight">
          <m-icon class="right-icon" color="#8c8c8c" type="settings" size="24"></m-icon>
        </view>
      </block>
		</m-nav>
    
    <view class="home-content">
      
      <view class="home-list-search" v-show="type=='search'">
        <view class="home-list-item" v-for="(item,index) in list" :key="index">
          <view class="item-photo"><image class="item-photo-image" :src="item.photo" mode="scaleToFill"></image></view>
          <view class="item-text">{{item.name}} . {{item.age}}</view>
        </view>
      </view>
      
      <view class="home-list-nearby" v-show="type=='nearby'">
        <view class="home-list-item" v-for="(itemA,indexA) in listA" :key="indexA">
          <view class="item-photo"><image class="item-photo-image" :src="itemA.photo" mode="scaleToFill"></image></view>
          <view class="item-text">{{itemA.name}} . {{itemA.age}}</view>
        </view>
      </view>
      
    </view>
    
	</view>
</template>

<script>
	import mNav from '@/components/m-nav/m-nav.vue';
  import mIcon from '@/components/m-icon/m-icon.vue';
	export default {
    components: {
      mNav,
      mIcon
    },
		data() {
			return {
        type:'search',
        navStyle:[{background:'#f7f7f7',color:'#ccc','box-shadow': '2px 2px 6px #e1e1e1'}],
        list:[
          {
            name:'薇子',
            photo:'http://yuehui1.nos.netease.com/20/40/75/3fe4b37c3c561899d628d9dc420fbfde/617747540/1dlove1215294',
            age:'24'            
          },
          {
            name:'薇子',
            photo:'http://yuehui2.nos.netease.com/37/73/7/3ac1aa093991314a549f45833939aa87/615530773/1490671172453',
            age:'24'            
          }, 
          {
            name:'薇子',
            photo:'http://yuehui1.nos.netease.com/12/48/43/b311f4dcee74e1a3e0e4883d622ea310/45504348/1482914053002',
            age:'24'            
          },
          {
            name:'薇子',
            photo:'http://yuehui2.nos.netease.com/37/73/7/3ac1aa093991314a549f45833939aa87/615530773/1490671172453',
            age:'23'            
          },
          {
            name:'薇子',
            photo:'http://yuehui1.nos.netease.com/12/48/43/b311f4dcee74e1a3e0e4883d622ea310/45504348/1482914053002',
            age:'24'            
          },
          {
            name:'薇子',
            photo:'http://yuehui1.nos.netease.com/20/40/75/3fe4b37c3c561899d628d9dc420fbfde/617747540/1dlove1215294',
            age:'24'            
          },
           {
            name:'薇子',
            photo:'http://yuehui1.nos.netease.com/20/40/75/3fe4b37c3c561899d628d9dc420fbfde/617747540/1dlove1215294',
            age:'24'            
          },
           {
            name:'薇子',
            photo:'http://yuehui1.nos.netease.com/20/40/75/3fe4b37c3c561899d628d9dc420fbfde/617747540/1dlove1215294',
            age:'24'            
          },
          {
            name:'薇子',
            photo:'http://yuehui1.nos.netease.com/20/40/75/3fe4b37c3c561899d628d9dc420fbfde/617747540/1dlove1215294',
            age:'24'            
          },
          {
            name:'薇子',
            photo:'http://yuehui2.nos.netease.com/37/73/7/3ac1aa093991314a549f45833939aa87/615530773/1490671172453',
            age:'24'            
          }, 
          {
            name:'薇子',
            photo:'http://yuehui1.nos.netease.com/12/48/43/b311f4dcee74e1a3e0e4883d622ea310/45504348/1482914053002',
            age:'24'            
          }
        ],
        listA:[
          {
            name:'李子',
            photo:'http://yuehui2.nos.netease.com/37/73/7/3ac1aa093991314a549f45833939aa87/615530773/1490671172453',
            age:'24'            
          }, 
          {
            name:'李子',
            photo:'http://yuehui1.nos.netease.com/20/40/75/3fe4b37c3c561899d628d9dc420fbfde/617747540/1dlove1215294',
            age:'24'            
          },
          {
            name:'李子',
            photo:'http://yuehui1.nos.netease.com/12/48/43/b311f4dcee74e1a3e0e4883d622ea310/45504348/1482914053002',
            age:'24'            
          },
          {
            name:'薇子1',
            photo:'http://yuehui2.nos.netease.com/37/73/7/3ac1aa093991314a549f45833939aa87/615530773/1490671172453',
            age:'23'            
          },
          {
            name:'李子',
            photo:'http://yuehui1.nos.netease.com/12/48/43/b311f4dcee74e1a3e0e4883d622ea310/45504348/1482914053002',
            age:'24'            
          },
          {
            name:'李子',
            photo:'http://yuehui1.nos.netease.com/20/40/75/3fe4b37c3c561899d628d9dc420fbfde/617747540/1dlove1215294',
            age:'24'            
          },
           {
            name:'李子',
            photo:'http://yuehui1.nos.netease.com/20/40/75/3fe4b37c3c561899d628d9dc420fbfde/617747540/1dlove1215294',
            age:'24'            
          },
           {
            name:'李子',
            photo:'http://yuehui1.nos.netease.com/20/40/75/3fe4b37c3c561899d628d9dc420fbfde/617747540/1dlove1215294',
            age:'24'            
          },
          {
            name:'李子',
            photo:'http://yuehui1.nos.netease.com/20/40/75/3fe4b37c3c561899d628d9dc420fbfde/617747540/1dlove1215294',
            age:'24'            
          },
          {
            name:'薇子',
            photo:'http://yuehui2.nos.netease.com/37/73/7/3ac1aa093991314a549f45833939aa87/615530773/1490671172453',
            age:'24'            
          }, 
          {
            name:'薇子',
            photo:'http://yuehui1.nos.netease.com/12/48/43/b311f4dcee74e1a3e0e4883d622ea310/45504348/1482914053002',
            age:'24'            
          }
        ]
			}
		},
		methods: {
			selectTab(type) {
        this.type = type;
      },
      tapRight() {
        console.log('right');
      }
		}
	}
</script>

<style>
.home {
  padding-top:44px;
}

.home .nav-tab {
  font-size:30rpx;
  font-weight: bold;
  margin:0 40rpx;
  color: #8c8c8c;
}

.home .tabAction {
  color:#FB2A2A;
}

.home .home-list-search {
  padding:0 10rpx;
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
}

.home .home-list-item {
  display: flex;
  margin:20rpx 20rpx;
  height:430rpx;
  width:325rpx;
  background: #ececec;
  border-radius: 10rpx;
  box-shadow: 0px 0px 5px #777777;
  flex-direction: column;
}

.home .item-photo {
  width:325rpx;
  height:360rpx;
}

.home .item-photo-image {
  width:100%;
  height:100%;
}

.home .item-text {
  height: 70rpx;
  line-height: 70rpx;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}


.home .home-list-nearby {
  padding:0 10rpx;
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
}



</style>
